import React, { useEffect, useState } from 'react'
import HomeHeard from '../itemList/component/HomeHeard/HomeHeard'
import { useParams ,useNavigate} from 'umi'
import { fetchItems } from '@a/home'
import {  Ellipsis } from 'antd-mobile'
import Icon from '@c/Icon'
import '../itemList/style.scss'
export default function index() {
  const navigate = useNavigate();
  const listId = useParams().id
  const listName = useParams().title;
  console.log(listId);
  // 选中状态
  const [orderState, setOrderState] = useState({
    orderIndex: 0, // 0 销售 1 价格 2 新品
    upDown: 0 // 0 升序 1 降序
  })
  // 点击触发事件销售和新品排序
  const clickOrder = (activeIndex) => {
    setOrderState({
      ...orderState,
      orderIndex: activeIndex
    })
  }
  // 价格 升降排序
  const pricClick = () => {
    // 判断是否价格排序
    if (orderState.orderIndex !== 1) {
      setOrderState({
        orderIndex: 1,
        upDown: 0
      })
    } else {
      // 切换升降序
      if (orderState.upDown === 0) {
        setOrderState({
          orderIndex: 1,
          upDown: 1
        })
      } else {
        setOrderState({
          orderIndex: 1,
          upDown: 0
        })
      }
    }
  }
  // 请求数据
  const [items, setItems] = useState([])
  const getItems = () => {
    // 判断排序方式
    let orderItems = 'ordersUp';
    switch (orderState.orderIndex) {
      case 0:
        orderItems = 'ordersUp';
        break;
      case 1:
        if (orderState.upDown === 0) {
          orderItems = 'priceUp';
        } else {
          orderItems = 'priceDown';
        }
        break;
      case 2:
        orderItems = 'addedUp';
        break;
      default:
        break;
        
    }
    fetchItems({
      categoryId : listId,
      orderBy : orderItems
    }).then(res => {
      console.log(res);
      if (res.data.code == 0) {
        setItems(res.data.data.result)
      }
    })
  }
  useEffect(() => {
    getItems()
  },[orderState])
  return (
    <div>
      <HomeHeard title={listName} />
      {/* 排序 */}
      <div className="search">
        <div className={`order sale ${orderState.orderIndex === 0 && 'active'}`}
          onClick={
            () => {
              clickOrder(0)
            }
          }
        >
          <span>销售</span>
        </div>
        <div className={`order price ${orderState.orderIndex === 1 && 'active'}`}
          onClick={
            () => {
              pricClick()
            }
          }
        >
          <span>价格</span>
          <div className={`triangle up ${(orderState.orderIndex === 1 && orderState.upDown === 0) && 'active'}`}></div>
          <div className={`triangle down ${(orderState.orderIndex === 1 && orderState.upDown === 1) && 'active'}`}></div>
        </div>
        <div className={`order news ${orderState.orderIndex === 2 && 'active'}`}
          onClick={
            () => {
              clickOrder(2)
            }
          }
        >
          <span>新品</span>
        </div>
      </div>
      <div className="mian-box">
      {
            items.map(item => {
              return (
                <div className="item-box" key={item.id} onClick={() => {
                  navigate(`/detail/${item.id}`)
                }}>
                  <img src={item.pic} alt="" />
                  <div className="itenm-box-left">
                    <Ellipsis direction='end' content={item.name} />
                    <div className="itenm-box-left-bot">
                      <p>￥{item.minPrice}</p>
                      <div className="icon">
                        <Icon name='gouwuchetianjia' size={22} color={'white'}/>
                      </div>
                    </div>
                  </div>
                </div>
              )
            })
          }
      </div>
    </div>
  )
}
